<div class="masthead" nav-menu></div>

<p class="lead">
    Show case on-demand loading of <a href="http://angular-ui.github.io/bootstrap/" target="_blank">UI Bootstrap</a>
    using <code gh-link="../src/ngload.js"></code> RequireJS plugin.
<hr>

<div class="main-content">
    <span class="lead"><strong>Show pictures from:</strong>&nbsp;</span>
    <div class="btn-group">
        <button id="btn-london" type="button" class="btn btn-primary" ng-model="cityModel" btn-radio="'London'">London</button>
        <button id="btn-paris" type="button" class="btn btn-primary" ng-model="cityModel" btn-radio="'Paris'">Paris</button>
        <button id="btn-rome" type="button" class="btn btn-primary" ng-model="cityModel" btn-radio="'Rome'">Rome</button>
    </div>
    
    <p class="break"></p>

    <carousel id="slide-carousel" interval="slideChangeInterval">
        <slide class="slide-image" ng-repeat="row in rows" active="row.active">
            <a ng-href="{{row.link}}" target="_blank">
                <img ng-src="{{row.media.m}}" style="margin:auto;">
            </a>
            <div class="carousel-caption text-center">
                <p>Slide {{$index+1}}: {{row.title}}</p>
            </div>
        </slide>
    </carousel>
</div>



